<template>
  <div class="flex items-center min-h-[20px]" :style="{ 'font-size': size }">
    <div
      class="flex items-center mr-[8px] cursor-pointer"
      @click="$router.back()"
    >
      <basic-icon name="arrow-left" size="14px"></basic-icon>
    </div>
    <section class="text-[14px]">
      <span v-if="parentName" class="text-[#83858A]"
        >{{ parentName }} {{ $route.meta.separator }}
      </span>
      <span class="ml-1 font-semibold">
        {{ title ? title : $route.meta.title }}</span
      >
    </section>
  </div>
</template>

<script lang="ts" setup>
interface IProps {
  title?: string
  size?: string
  parentName?: string
}
withDefaults(defineProps<IProps>(), {
  size: '14px'
})
</script>
